<template>
	<view>
		<view class="balance_view">
			<view class="row-between" style="width: 100%;font-size: 24upx;color: #FFFFFF;margin-bottom: 34upx;">
				<view>共有账户余额</view>

				<navigator url="/pages/detail/commonAccountDetail/commonAccountDetail" hover-class="none">
					<view>明细
						<uni-icons style="font-size: 24upx; color: #FFFFFF;margin-left: 12upx;" type="arrowright" />
					</view>
				</navigator>
			</view>
			<view style="font-size: 52upx;font-weight: bold;color: #FFFFFF;">
				<text>{{numberEntity.accountBalance}}</text>
				<text style="font-size: 24upx;">元</text>
			</view>
		</view>
		<view class="card_view card_view_image">
			<view class="row-start">
				<view class="row-start headline-view">权益分恒定发行量</view>
			</view>
			<view class="" style="padding: 30upx;">
				<view style="font-size: 52upx;font-weight: bold;color: #333333;">{{numberEntity.circulation}}</view>
				<view class="circulation_border"></view>
				<view class="row-start">
					<navigator :url="'/pages/detail/commonAccountDetail/totalIssued'" hover-class="none">
						<view>
							<view class="circulation_number">{{numberEntity.issued}}</view>
							<view class="circulation_text">已发行总量
								<uni-icons style="font-size: 24upx; color: #777777;margin-left: 15upx;" type="arrowright" />
							</view>
						</view>
					</navigator>
					<view style="width: 4upx;height: 100%; background: #EEEEEE;margin-right: 90upx;margin-left: 42upx;"></view>
					<navigator :url="'/pages/detail/commonAccountDetail/totalAmountDestroyed'" hover-class="none">
						<view>
							<view class="circulation_number">{{numberEntity.destroyed}}</view>
							<view class="circulation_text">已销毁总量
								<uni-icons type="arrowright" style="font-size: 24upx; color: #777777;margin-left: 15upx;" />
							</view>
						</view>
					</navigator>
				</view>
			</view>
		</view>
		<view class="card_view">
			<view class="row-start">
				<view class="row-start headline-view">当前权益分流通总量</view>
			</view>
			<view style="padding: 32upx 0upx 32upx 32upx;">
				<view style="font-size: 52upx;font-weight: bold;color: #333333;margin-bottom: 20upx;">{{numberEntity.totalEquity}}</view>
				<view style="font-size: 22upx;color: #999999;">流通总量=权益分已发行总量-权益分已销毁总量</view>
			</view>
		</view>
		<view class="card_view">
			<view class="row-start">
				<view class="row-start headline-view">今日权益分价格</view>
			</view>
			<view style="padding: 32upx 0upx 32upx 32upx;">
				<view style="font-size: 52upx;font-weight: bold;color: #FE5E49;margin-bottom: 20upx;">
					<text>{{numberEntity.equityPrice}}</text>
					<text style="font-size: 24upx;">元</text>
				</view>
				<view style="font-size: 22upx;color: #999999;">今日权益分价格=昨日共有账户余额/昨日权益分流通总量</view>
			</view>
		</view>
		<view class="card_view">
			<view class="row-between">
				<view class="row-start headline-view">记账节点数量</view>
				<!-- <navigator :url="'/pages/detail/commonAccountDetail/nodeNumberDetails'" hover-class="none">
					<view style="font-size: 24upx;color: #999999;">明细
						<uni-icons type="arrowright" style="font-size: 24upx;margin-left: 12upx;" color="#999999" />
					</view>
				</navigator> -->
			</view>
			<view style="padding: 32upx;">
				<view style="font-size: 52upx;font-weight: bold;color: #333333;">{{numberEntity.numberOfNodes}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import NumberAnimate from "@/common/NumberAnimate.js";
	export default {
		computed: {
			...mapState(['hasLogin', 'downUrl', 'imgSite', 'url'])
		},
		data() {
			return {
				accountData: {},
				numberEntity: {
					accountBalance: 0,
					circulation: 0,
					issued: 0,
					destroyed: 0,
					totalEquity: 0,
					equityPrice: 0,
					numberOfNodes: 0
				}
			}
		},
		mounted() {
			this.infoRequest()
		},
		methods: {
			numberchen(key, val) {
				console.log(key, val)
				let entity = new NumberAnimate({
					from: val,
					speed: 1000,
					refreshTime: 100,
					decimals: 3,
					onUpdate: (res) => {
						this.numberEntity[key] = entity.tempValue
						console.log("NumberAnimate", entity.tempValue)
					},
					onComplete: () => {}
				});
			},
			// 初始化请求
			async infoRequest() {
				await this.getRequest()
				this.$emit("getTotalPageNo", this.totalPageNo, this.page)
			},
			getRequest() {
				this.$api.showLoading()
				return this.$api.globalUtil.requestAjax({
					url: '/AccountBalanceApi/sharedAccount',
					method: 'POST',
					success: (res) => {
						this.$api.hideLoading()
						let entity = res.data.response
						this.accountData = entity;
						this.numberEntity = {
							accountBalance: Number.parseInt(entity.accountBalance).toFixed(2),
							circulation: entity.circulation.toFixed(2),
							issued: entity.issued.toFixed(2),
							destroyed: entity.destroyed.toFixed(2),
							totalEquity: entity.totalEquity.toFixed(2),
							equityPrice: entity.equityPrice.toFixed(2),
							numberOfNodes: entity.numberOfNodes.toFixed(2),
						};
					} 
				}).catch(err => this.$api.hideLoading());
			},
		}
	}
</script>

<style scoped lang="scss">
	.balance_view {
		background: linear-gradient(-30deg, #EC2400 0%, #FF5A00 100%);
		border-radius: 10upx;
		padding: 39upx;
		margin-bottom: 20upx;
	}

	.card_view {
		padding: 40upx 30upx 0upx 0upx;
		background-color: #FFFFFF;
		border-radius: 10upx;
		margin-bottom: 20upx;
	}

	.card_view_image {
		position: relative;
		overflow: hidden;

		&::after {
			content: " ";
			width: 135upx;
			height: 135upx;
			position: absolute;
			background-size: 100%;
			background-image: url(../../static/assets/pic2.png);
			bottom: -18upx;
			right: 0upx;
		}
	}

	.headline-view {
		font-size: 24upx;
		font-weight: 500;
		color: #333333;

		&::before {
			content: " ";
			width: 5upx;
			height: 24upx;
			background: linear-gradient(-30deg, #EC2400 0%, #FF7E00 100%);
			border-radius: 3upx;
			margin-right: 25upx;
		}
	}

	.circulation_border {
		height: 2upx;
		background: #EEEEEE;
		border-radius: 1upx;
		margin-top: 40upx;
		margin-bottom: 40upx;
	}

	.circulation_number {
		font-size: 36upx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
		margin-bottom: 22upx;
	}

	.circulation_text {
		font-size: 24upx;
		color: #777777;
	}
</style>
